import React from 'react';
import { lazy } from 'react';
import L from '../L';
import { makeStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { createHashHistory } from 'history'; // 如果是hash路由
import {userContext} from '../Context/userContext';
// 项目名字
const Title = lazy(() => (
    process.env.REACT_APP_PROJECT_NAME
    ? import(`./${process.env.REACT_APP_PROJECT_NAME}/Title`)
    : import(`./DefaultContent`)
))
// header 右方（除账号以外的）其它内容
const HealderRight = lazy(() => (
    process.env.REACT_APP_PROJECT_NAME
    ? import(`./${process.env.REACT_APP_PROJECT_NAME}/HeaderRight`)
    : import(`./DefaultContent`)
))


const history = createHashHistory();

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        position: 'relative',
        zIndex: 1300
    },
    grow: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        display: 'none',
        [theme.breakpoints.up('sm')]: {
            display: 'block',
        },
    },
}));

export default function MenuAppBar(props) {
    const classes = useStyles();
    const [auth,setAuth] = React.useState(true);
    const [anchorEl,setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
    function handleChange(event) {
        setAuth(event.target.checked);
    }

    function handleMenu(event) {
        setAnchorEl(event.currentTarget);
    }
    // 退出登录
    function handleSignOut() {
        // 在这做点什么
        localStorage.removeItem(process.env.REACT_APP_PROJECT_NAME+'_user');
        history.replace('/login');
    }

    function handleClose() {
        setAnchorEl(null);
    }

    function handleProfileMenuOpen(event) {
        setAnchorEl(event.currentTarget);
    }

    function handleMobileMenuClose() {
        setMobileMoreAnchorEl(null);
    }

    function handleMenuClose() {
        setAnchorEl(null);
        handleMobileMenuClose();
    }

    function handleMobileMenuOpen(event) {
        setMobileMoreAnchorEl(event.currentTarget);
    }
    return (
        <userContext.Consumer>
            {(user) => (
                <Toolbar>
                    <IconButton
                        edge="start"
                        className={classes.menuButton}
                        color="inherit"
                        aria-label="menu"
                        onClick={props.onIconButtonClick}>
                        <MenuIcon/>
                    </IconButton>
                    <Typography className={classes.title} variant="h6" noWrap>
                        <L><Title></Title></L>
                    </Typography>
                    <div className={classes.grow} />
                    <div className={classes.sectionDesktop}>
                        <L><HealderRight></HealderRight></L>
                        <span>{user.user_name}</span>
                        <IconButton
                            aria-label="account of current user"
                            aria-controls="menu-appbar"
                            aria-haspopup="true"
                            onClick={handleMenu}
                            color="inherit">
                            <AccountCircle/>
                        </IconButton>
                        <Menu
                            id="menu-appbar"
                            anchorEl={anchorEl}
                            anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'right'
                        }}
                            keepMounted
                            transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right'
                        }}
                            open={open}
                            onClick={handleClose}
                            >
                            <MenuItem onClick={() => {history.push('/ChangePassword')}}>修改密码</MenuItem>
                            <MenuItem onClick={handleSignOut}>退出登录</MenuItem>
                        </Menu>
                    </div>
                </Toolbar>
            )}
        </userContext.Consumer>
    );
}
